<template>
  <div>
    <el-form
      :inline="true"
      label-width="120"
      :model="formInline"
      ref="formRef"
      class="demo-form-inline"
    >
      <el-form-item label="任务选择">
        <el-select v-model="formInline.signingMethod" placeholder="">
          <el-option
            v-for="item in projectTendersWayList"
            :key="item"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <tableIndex
        :tableData="tableData"
        :tableHead="tableHead"
        :isIndex="true"
        :isSelection="true"
        :isRadio="false"
        :notSearch="true"
        :fields="state.fields"
        :height="500"
        :page="state.page"
        @selectChange="selectChange"
        @searchList="searchList"
        @page-change="pageChange"
        @resetList="resetList"
      >
        <template #btns>
          <el-button
            size="small"
            class="update"
            type="primary"
            @click="projectProposal()"
            >新增节点</el-button
          >
          <el-button
            size="small"
            class="update"
            type="primary"
            @click="projectProposal()"
            >删除</el-button
          >
          <el-button
            size="small"
            class="update"
            type="primary"
            @click="projectProposal()"
            >上移</el-button
          >
          <el-button
            size="small"
            class="update"
            type="primary"
            @click="projectProposal()"
            >下移</el-button
          >
        </template>
      </tableIndex>
    </div>
    <el-dialog
      v-model="state.centerDialogVisible"
      title="项目预算编制"
      width="30%"
      align-center
      class="dialogStyle"
    >
      <el-form :model="formInline" class="demo-form-inline" label-width="150px">
        <el-form-item label="任务类型">
          <el-input v-model="formInline.user" placeholder="" />
        </el-form-item>
        <el-form-item label="任务节点">
          <el-input v-model="formInline.user" placeholder="" />
        </el-form-item>
        <el-form-item label="节点实施行为">
          <el-select v-model="formInline.signingMethod" placeholder="">
            <el-option
              v-for="item in projectTendersWayList"
              :key="item"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.centerDialogVisible = false" class="button_cancel2">取消</el-button>
          <el-button @click="state.centerDialogVisible = false" class="button_view">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { ElForm, ElFormItem,ElDialog } from 'element-plus'
import tableIndex from '@/components/table/index.vue'

const state = reactive({
  centerDialogVisible: false,
  page: {
    page: 1,
    pageSize: 10,
    total: 0
  }
})
let formInline = reactive({
  signingMethod: ''
})
const tableData = reactive([{}])
const tableHead = reactive([
  {
    label: '工作细项(任务节点)',
    prop: 'name'
  },
  {
    label: '实施行为类型',
    prop: 'type'
  }
])
const projectTendersWayList = reactive([
  {
    label: '招标',
    value: '1'
  },
  {
    label: '招标',
    value: '2'
  }
])
const projectProposal = () => {
  state.centerDialogVisible = true
}
const pageChange = (page) => {
  console.log(page)
}
</script>
<style scoped lang="scss">
.el-form-item,
.el-select {
  width: 100%;
}
</style>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/button.scss';
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
